<template>
  <el-form label-width="100px">
    <!-- SPU名称 -->
    <el-form-item label="SPU名称">
      {{ spu.spuName }}
    </el-form-item>

    <!-- SKU名称 input输入框 -->
    <el-form-item label="SKU名称">
      <el-input placeholder="SKU名称" v-model="skuForm.skuName"></el-input>
    </el-form-item>

    <!-- 价格 input输入框 -->
    <el-form-item label="价格">
      <el-input placeholder="价格" type="number" v-model="skuForm.price"></el-input>
    </el-form-item>

    <!-- 重量 input输入框 -->
    <el-form-item label="重量">
      <el-input placeholder="重量" type="number" v-model="skuForm.weight"></el-input>
    </el-form-item>

    <!-- 规格描述 input文本域 -->
    <el-form-item label="规格描述">
      <el-input placeholder="规格描述" type="textarea" rows="4" v-model="skuForm.skuDesc"></el-input>
    </el-form-item>

    <!-- 平台属性 select选择框 -->
    <el-form-item label="平台属性">
      <el-form :inline="true" label-width="80px">
        <el-form-item :label="attr.attrName" v-for="(attr,index) in attrList" :key="attr.id">
          <el-select v-model="attr.attrIdValueId">
            <el-option :value="`${attr.id}:${attrValue.id}`" :label="attrValue.valueName" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <!-- 销售属性 select选择框 -->
    <el-form-item label="销售属性">
      <el-form :inline="true" label-width="80px">
        <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in spuSaleAttrList" :key="saleAttr.id">
          <el-select v-model="saleAttr.saleAttrIdValueId">
            <el-option :value="`${saleAttr.id}:${saleAttrValue.id}`" :label="saleAttrValue.saleAttrValueName" v-for="(saleAttrValue,index) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <!-- 图片列表 表格 -->
    <el-form-item label="图片列表">
      <el-table border stripe :data="spuImageList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55px"></el-table-column>
        <el-table-column label="图片">
          <template v-slot="{row,$index}">
            <img :src="row.imgUrl" style="width: 100px;height: 80px;" >
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row,$index}">
            <el-button @click="setDefault(row,spuImageList)" v-if="row.isDefault === '0'" type="primary" size="small">设为默认</el-button>
            <el-tag v-else type="danger">默认</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>

    <!-- 按钮 -->
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="emits('changeState',1)">取消</el-button>
    </el-form-item>
  </el-form>
  
</template>
<script lang="ts">
import { defineComponent } from 'vue';
  export default defineComponent({
    name:'SkuForm'
  })
</script>
<script lang="ts" setup>
// 引入数据类型
import type { SpuData, SpuImageData, SpuSaleAttrData } from '@/api/spu';
// 引入 onMounted ref
import { onMounted, ref } from 'vue'
// element-plus 的 ElMessage
import { ElMessage } from 'element-plus';
// 引入attr的api 数据类型
import attrApi, { type AttrData } from '@/api/attr'
// 引入sku的api 数据类型
import skuApi, {type SkuAttrValueData, type SkuData,type SkuImageData, type SkuSaleAttrValueData} from "@/api/sku";
// 引入仓库
import {useCategoryStore} from '@/stores/category'
// 引入storeToRefs
import { storeToRefs } from 'pinia';

// 接收父组件传递的参数 
const props = defineProps<{
  spu:SpuData
}>()

// 点击取消返回列表页
const emits = defineEmits(['changeState'])

// 调用仓库
const categoryStore = useCategoryStore()
// 解构获取仓库的数据
const {category1Id,category2Id,category3Id} = storeToRefs(categoryStore)
// 定义用来存放初始化请求发送成功用来存放数据的变量
const attrList = ref<AttrData[]>([])
const spuImageList = ref<SpuImageData[]>([])
const spuSaleAttrList = ref<SpuSaleAttrData[]>([])
// 定义发起api请求的函数
const getInitAddSkuFormData = async () => {
  // 获取所有的列表
  // http://localhost:3000/app-dev/admin/product/attrInfoList/2/13/61
  const promise1 = attrApi.getList(category1Id.value as number,category2Id.value as number,category3Id.value as number)
  // 根据spu的id获取当前spu的图片列表
  // http://localhost:3000/app-dev/admin/product/spuImageList/6
  const promise2 = skuApi.getSpuImageList(props.spu.id as number)
  // 根据spu的id获取spu自己的销售属性列表
  // http://localhost:3000/app-dev/admin/product/spuSaleAttrList/6
  const promise3 = skuApi.getSpuSaleAttrList(props.spu.id as number)
  // Promise.all统一发送请求
  try {
    // 发送请求
    const res = await Promise.all([promise1,promise2,promise3])
    // 把请求发送成功的获取的数据存到本地组件
    attrList.value = res[0]

    // 不能直接赋值了，需要对数组里面的每个对象进行操作
    // spuImageList.value = res[1]
    let imgList = res[1]
    imgList.forEach(item => item.isDefault = '0')
    spuImageList.value = imgList

    spuSaleAttrList.value = res[2]
  } catch (error) {
    // 失败弹框提示
    ElMessage.error('获取添加sku的初始化动态数据失败')
  }
}
// 当页面挂载完成以后立即执行里面的函数发送请求
onMounted(()=>{
  getInitAddSkuFormData()
})


// 收集数据
const skuForm = ref<SkuData>({
  // v-model直接收集
  price: 0,
  skuName: '',
  skuDesc: '',
  weight: '',
  // 父组件或者仓库可以得到,点击保存的时候再整理进去
  spuId: 0,
  tmId: 0,
  category3Id: 0,
  // 需要自己写代码去收集
  skuDefaultImg: '',
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: []
})
// 定义skuImageList先把获取的图片列表保存在外面
const skuImageList = ref<SkuImageData[]>([]) //专门用来收集sku自己的图片列表
// 收集sku图片列表
const handleSelectionChange = (val:any) => {
  // console.log(val);
  // 保存到一个新的变量里面
  skuImageList.value = val
}
// 排他思想造作默认图片设置(一般排他传递两个参数)
const setDefault = (row:SpuImageData,spuImageList:SpuImageData[]) => {
  // 1. 先让所有的图片都为 0
  spuImageList.forEach(item => item.isDefault = '0')
  // 2. 再让点击选中的图片为 1
  row.isDefault = '1'

  // 收集sku图片的默认路径
  skuForm.value.skuDefaultImg = row.imgUrl
}


// 保存逻辑
const save = async () => {
  // 1. 定义数据
  let sku = skuForm.value


  // 2. 整理数据
  // 1) 整理 category3Id tmId 和 spuId
  // 1.1) 从仓库中拿到category3Id
  sku.category3Id = category3Id.value as number
  // 1.2) 从父组件当中拿到 tmId 和 spuId
  sku.tmId = props.spu.tmId as number
  sku.id = props.spu.id as number

  // 2)整理图片列表
  sku.skuImageList = skuImageList.value.map(item => {
    // imgName: string,
    // imgUrl: string,
    // spuImgId: number,
    // isDefault: string
    return {
      imgName:item.imgName,
      imgUrl:item.imgUrl,
      spuImgId:item.id as number,
      isDefault:item.isDefault
    }
  })

  // 3)整理平台属性值列表
  sku.skuAttrValueList = attrList.value.reduce((prev,item) => {
    // 判断每一项是不是有attrIdValueId
    if(item.attrIdValueId){
      /* 如果有就构造成一个对象 */
      // 把这一项解构，以：分割
      let [attrId,valueId] = item.attrIdValueId.split(':')
      // 把解构出来的数据定义成一个对象
      let obj = {attrId,valueId}
      // 然后把这一项push进这个数组当中去
      prev.push(obj)
    }
    // 切记最后一定要 return prev
    return prev
  },[] as SkuAttrValueData[])

  // 4)整理销售属性值列表
  sku.skuSaleAttrValueList = spuSaleAttrList.value.reduce((prev,item) => {
    // 判断每一项是不是有saleAttrIdValueId
    if(item.saleAttrIdValueId){
      /* 如果有就构造成一个对象 */
      // 把这一项解构，以：分割
      let [saleAttrId,saleAttrValueId] = item.saleAttrIdValueId.split(':')
      // 把解构出来的数据定义成一个对象
      let obj = {saleAttrId,saleAttrValueId}
      // 然后把这一项push进这个数组当中去
      prev.push(obj)
    }
    // 切记最后一定要 return prev
    return prev
  },[] as SkuSaleAttrValueData[])


  // 3. 发请求
  try {
    // 传入参数发送api请求
    await skuApi.saveSkuInfo(sku)
    // 4. 成功干什么
    // 1）添加sku成功弹框提示
    ElMessage.success('添加sku成功')
    // 2）回到spu列表页
    emits('changeState',1)
  } catch (error) {
    // 5. 失败干什么
    // 1）添加sku失败弹框提示
    ElMessage.error('添加sku失败')
  }
}
		
</script>

<style lang="less" scoped>
</style>
